<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《最终幻想14》FFXIV官方网站-「暗影之逆焰」好评开放_人气突破1800万MMORPG大作</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/meida.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="#" class="logo">
                        <img src="./images/10014.png" alt="">
                    </a></li>
                <li class="active">
                    <a href="#" class="logo-title">
                        <img src="./images/10013.png" alt="">
                    </a>
                    <div class="down-nav">
                        <a href="#"><img src="./images/10015.png"></a>
                    </div>
                </li>
                <li>
                    <div class="rt">
                        <button class="btn buy">商城</button>
                        <button class="btn">充值</button>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="head-content">
            <div class="head-box-lf">
                <div>
                    <h4 class="title">活动&nbsp;<span>EVENTS</span><span class="title-right">MORE+</span></h4>
                    <div class="evebanner">
                        <div class="item-box">
                            <div>
                                <div class="item-img"><img src="./images/1.jpg" alt=""></div>
                                <p>道具商城新道具上架：漆黑的虚无巨镰等</p>
                            </div>
                        </div>
                        <div class="item-box">
                            <div>
                                <div class="item-img"><img src="./images/10001.jpg" alt=""></div>
                                <p>季节活动女儿节即将上线</p>
                            </div>
                        </div>
                        <div class="item-box">
                            <div>
                                <div class="item-img"><img src="./images/10002.jpg" alt=""></div>
                                <p>莫古莫古大收集</p>
                            </div>
                        </div>
                        <div class="item-box">
                            <div>
                                <div class="item-img"><img src="./images/10003.jpg" alt=""></div>
                                <p>最终幻想14 X 罗森 限时联动开启！</p>
                            </div>
                        </div>
                        <div class="item-box">
                            <div>
                                <div class="item-img"><img src="./images/10004.jpg" alt=""></div>
                                <p>你不知道的本地化翻译！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="head-box-rg">
                <div>
                    <h4 class="title">版本更新&nbsp;<span>UPDATES</span></h4>
                    <div class="list">
                        <div class="list-item">
                            <p><span>2022.03.16</span> | PATCH6.00 「晓月之终途」正式公开！</p>
                        </div>
                        <div class="list-item">
                            <p><span>敬 请 期 待&nbsp;</span> | PATCH6.01 大型任务「万魔殿」袭来！</p>
                        </div>
                        <div class="list-item">
                            <p><span>敬 请 期 待&nbsp;</span> | PATCH6.05 零式「万魔殿」开启 全新宝物库实装</p>
                        </div>
                        <p class="tip">※版本更新时间可能调整，请以实际公布为准</p>
                    </div>
                </div>
            </div>
            <div class="up-nav">
                <a href="#">
                    <img src="./images/10035.png" alt="">
                </a>
            </div>
        </div>
    </header>
    <main>
        <div class="cadpa">
            <img src="./images/10005.png" alt="">
        </div>
        <div class="video">
            <video src="./video/vidindex.mp4" width="100%" height="100%" loop autoplay muted></video>
        </div>
        <section>
            <div>
                <img src="./images/10016.png">
            </div>
            <div class="menu">
                <div class="tsf into">
                    <p>进入官网
                        <i class="iconfont-right"></i>
                    </p>
                </div>
                <div class="down">
                    <p>下载游戏</p>
                    <p>- 免费试玩30小时 -</p>
                </div>
                <div class="tsf into">
                    <p>领取新手礼包
                        <i class="iconfont-right"></i>
                    </p>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="sc">
            <img src="./images/10020.png" alt="">
            <img src="./images/10006.jpg" alt="">
        </div>
        <div class="secon">
            <p>新出审字[2012]291号 文网进字[2012]010号</p>
            <p>增值电信业务经营许可证：沪 B2-20100008 (署) 网出证 (沪) 字第027号</p>
            <p>沪ICP备14052292号-2 <img src="./images/10007.png">沪公网安备 31011502007143号</p>
            <p>上海数龙科技有限公司版权所有 021-50504740 浦东新区海趣路58号海趣园1号楼</p>
            <p>互联网违法和不良信息举报邮箱: tousu@shengqugames.com 举报电话: 95105222-8008</p>
            <p>©2010 - 2022 SQUARE ENIX CO., LTD. All Rights Reserved.</p>
            <p>LOGO ILLUSTRATION: © 2010, 2014, 2016, 2018, 2021 YOSHITAKA AMANO</p>
        </div>
        <div class="seimg">
            <div><img src="./images/10008.png" alt=""></div>
            <div class="seactive"><img src="./images/10009.png" alt=""></div>
            <div class="seactive"><img src="./images/10010.png" alt=""></div>
            <div><img src="./images/10011.png" alt=""></div>
            <div><img src="./images/10012.png" alt=""></div>
        </div>
    </footer>
    <script>
        // 控制导航栏伸缩
        const upNav = document.querySelector(".up-nav");
        const downNav = document.querySelector(".down-nav")
        const headContent = document.querySelector(".head-content")
        upNav.addEventListener('click', () => {
            upNav.style.display = 'none'
            headContent.style.display = 'none'
            downNav.style.display = 'block'
        })
        downNav.addEventListener('click', () => {
            upNav.style.display = 'block'
            headContent.style.display = 'flex'
            downNav.style.display = 'none'
        })
    </script>
</body>

</html>